<template>
  <div class="app-container message-list-wrap">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="未读消息" name="1"></el-tab-pane>
      <el-tab-pane label="已读消息" name="2"></el-tab-pane>
    </el-tabs>
    <el-table v-loading="loading" max-height="550" :data="messageList" border>
      <el-table-column label="操作" align="center" fixed class-name="small-padding fixed-width" width="100">
        <template slot-scope="scope">
          <el-link :href="`#/message/detail?id=${scope.row.id}&receiveId=${scope.row.receiveId}`" type="primary"
            :underline="false">查看</el-link>
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title" width="200" />
      <el-table-column label="内容" prop="content" />
      <el-table-column label="发送时间" prop="newsDate" width="170"></el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
  import {
    myBizNewsIndex
  } from "@/api/home";
  export default {
    name: "MessageList",
    data() {
      return {
        activeName: '1',
        loading: false,
        queryParams: {
          pageNum: 1,
          pageSize: 30
        },
        messageList: [],
        total: 0

      };
    },


    created() {
      this.getList(0)
    },
    methods: {

      getList(type) {
        this.loading = true
        myBizNewsIndex({
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          type: type //消息状态 0：未读  1：已读
        }).then(res => {
          this.messageList = res.data.rows
          this.total = res.data.total
          this.loading = false
        })
      },
      handleClick(tab, event) {
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = 30
        if (this.activeName == 1) {
          this.getList(0)
        } else {
          this.getList(1)
        }
      }
    }
  };

</script>

<style rel="stylesheet/scss" lang="scss">

</style>
